import {useState,useEffect,useRef} from 'react'
import styles from './xinag.module.css'
import { Button, NavBar,Typography,Cell } from 'react-vant';
import {useNavigate,useSearchParams} from 'react-router-dom'
import { api } from '../../luyou/index'
import axios from 'axios'
export default function Xiang() {
  const navigate = useNavigate()
  const [searchParams] = useSearchParams()
  let alipayForm=useRef()
  const id = searchParams.get('id')
  const [list,setList] = useState({})
  let [list2,setList2] = useState([])
  let [flag,setFlag] = useState(true)
  let [star,setStar] = useState([])
  useEffect(()=>{
      getlist()
      getstar()
  },[])
  let getlist=async ()=>{
      let {data}=await api.get('/findlist',{params:{_id:id}})
      console.log(data);
      if(data.code==200){
          setList(data.data)
          setList2(data.data2)
      }
  }
  let getstar=async()=>{
        let {data}=await api.get('/getstar')
        console.log(data);
        if(data.code==200){
            setStar(data.data)
        }
  }
  let zhifu=async()=>{
      let {data}=await api.post('/zhifu',{name:list.name,price:list.price})
      console.log(data);
      if(data.code==200){
          navigate('/dingdan')
      }
  }
  return (
    <>
         <NavBar
            title="标题"
            leftText="返回"
            rightText={
                list.status?
                <svg t="1736395426084" style={{width:'0.4rem',height:'0.4rem'}} className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4765" width="200" height="200"><path d="M512 901.746939c-13.583673 0-26.122449-4.179592-37.093878-13.061225-8.881633-7.314286-225.697959-175.020408-312.424489-311.379592C133.746939 532.37551 94.040816 471.24898 94.040816 384.522449c0-144.718367 108.146939-262.269388 240.326531-262.269388 67.395918 0 131.657143 30.82449 177.632653 84.636735 45.453061-54.334694 109.191837-84.636735 177.110204-84.636735 132.702041 0 240.326531 117.55102 240.326531 262.269388 0 85.159184-37.093878 143.673469-67.395919 191.216327l-1.044898 1.567346c-86.726531 136.359184-303.542857 304.587755-312.424489 311.379592-10.44898 8.359184-22.987755 13.061224-36.571429 13.061225z" fill="#E5404F" p-id="4766"></path></svg>
                :
                <svg t="1736395258570" style={{width:'0.3rem',height:'0.3rem'}} className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4603" width="200" height="200"><path d="M171.712 571.648l0.352 0.32 287.904 252.8a64 64 0 0 0 82.912 1.344l296.832-244.544a215.584 215.584 0 1 0-301.824-300.576L512 316.672l-25.888-35.616a215.584 215.584 0 1 0-314.4 290.624zM32 407.584a279.584 279.584 0 0 1 480-194.944 279.584 279.584 0 0 1 480 194.944 278.144 278.144 0 0 1-113.024 224.512l-295.36 243.392a128 128 0 0 1-165.888-2.592L129.984 620.16A278.976 278.976 0 0 1 32 407.584z" fill="#000000" p-id="4604"></path></svg>
            }
            onClickLeft={() =>navigate('/home')}
            // onClickRight={() => console.log('right')}
        />
        <img src={list.img} style={{width:'100%',height:'4rem'}} alt="" />
        <div className={styles.box}>
            <div className={styles.sbox}>
                <h2>{list.name}</h2>
                <span className={styles.span}>￥{list.price}</span>
            </div>
            <span>{list.num}参与者<span style={{marginLeft:'0.5rem'}}>{list.time}</span></span>
            <h2>活动介绍</h2>
            <Typography.Text
                className={styles.text}
                ellipsis={flag}
                onClick={()=>setFlag(!flag)}
            >{list.desc}</Typography.Text>
           
           <div className={styles.box2}>
                {/* 过滤list2和star两个数据表中相同的数据 */}
                {list2.map((item,index)=>{
                    return star.map((item2,index2)=>{
                        if(item==item2._id){
                            return <div key={item2._id} className={styles.box3}>
                                    <img className={styles.img} src="/public/02.jpeg" alt="" />
                                    <span>{item2.name}</span>
                            </div>
                        }
                    })
                })}
           </div>
           <h2>活动位置</h2>
           <Cell title='所在位置' isLink value='到这里去' onClick={()=>navigate('/mapess?dizhi='+list.address)}/>
            <div ref={alipayForm}></div>
           <div className={styles.box4}>
            <Button className={styles.btn} onClick={async()=>{
                let {data}=await axios.post('http://localhost:3000/zhifu',{name:list.name,price:list.price})

                console.log(data)
                console.log(alipayForm)
                // 调用支付宝支付
                alipayForm.current.innerHTML=data.url
                document.forms[0].submit()
            }}>立即预定</Button>
           </div>
        </div>
        
    </>
  )
}
